<template>
    <h1>查看全部订单列表</h1>
    <el-table :data="orderlist" style="width: 100%" v-loading="loading">
        <el-table-column prop="orderid" label="订单编号" width="180" />
        <el-table-column prop="userid" label="用户编号" width="150" />
        <el-table-column prop="proname" label="商品名称" width="180" />
        <el-table-column prop="originprice" label="商品价格" width="80" />
        <el-table-column label="图片" width="150">
            <template #default="scope">
                <img class="img1" :src="scope.row.img1" />
            </template>
        </el-table-column>
        <el-table-column prop="num" label="商品数量" width="80" />
        <el-table-column prop="status" label="订单状态" width="80" />
        <el-table-column prop="time" label="购买时间" width="140" />

    </el-table>
</template>
  
<script setup lang="ts">
// 插件
import {
    Delete,
} from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import { reactive, ref } from "vue";
import service from "../../../ulit/service";
const loading = ref(true)
interface order {
    orderid: string,
    userid: string,
    proname: string,
    img1: string,
    originprice: number,
    discount: number,
    num: number,
    time: string,
    status: number
}

// 1、定义轮播图数据
let orderlist = reactive<order[]>([]);
// 2、获取所有的轮播图数据
const getorderlist = () => {
    service({
        url: "order/list"
    })
        .then((res: any) => {
            if (res.data.code === "200") {
                // orderlist = res.data.data;
                orderlist.length = 0
                orderlist.push(...res.data.data);
                loading.value = false
            }
        })
}
getorderlist()
</script>
  
<style scoped>
.img1 {
    width: 120px;
    height: 100px;
}
</style>